<!--  -->
<template>
  <div class="JYFW-pro-con"  :style="{ height: height }">
    <a-spin :spinning="spinning"></a-spin>
      <!-- <a-button type="primary" @click="add">
        Primary
      </a-button>
      <a-button type="primary" @click="getModeVal">
        获取结果
      </a-button>
      <a-button type="primary" @click="check">
        检查
      </a-button> -->
      <!-- <a-button type="primary" @click="check">
        检查
      </a-button> -->
      <div :key="item.key+index" class="pro-item" v-for="(item,index) in formDataArr">
        <!-- 删除按钮 -->
        <div class="pro-item-delete" v-if="index!=0">
          <a-tooltip placement="top">
            <template slot="title">
              <span>删除当前数据</span>
            </template>
            <a-button type="dashed" icon="delete" :size="'small'" @click="()=>{deleteEvent(item,index)}" />
          </a-tooltip>
        </div>
        <ProItem :key="pitem.nameEn+'-'+pindex" :event="(...args)=>{ProItemEvent(index,pindex,...args)}" v-for="(pitem,pindex) in item.dataList" :isError="pitem.isError" :errorMsg="pitem.errorMsg" :item-data="pitem"></ProItem>
      </div>




  </div>
</template>

<script>
import JYFWNewItem from './JYFWNewItem.vue'
const ProItem = {
  components:{JYFWNewItem},
  props: {
    itemData: { type: Object },
    isError:{type:Boolean,default:false},
    errorMsg:{type:String,default:''},
    event: { type: Function },
    // isShowWatermark:{type:Boolean, default:true}
  },
  data() {
    return {
      // isError: false,
      options:[],
      // itemData:{
      //   label:'主营经营范围',
      //   value:'内容',
      //   defaultValue=['zhejiang', 'hangzhou', 'xihu']
      //   type:'textarea',
      //   disabled:false,
      //   options:[],
      //   required: false,// 是否为必填
      //   isMaster:false // 是否为主营经营范围
      // }
    }
  },
  watch: {
    itemData: {
      handler(val) {
        if(val && val.type=='cascader'){
          this.options = val.options
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    loadDataEvent(selectedOptions){
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
      this.event && this.event('loadData',targetOption,(childrenArr)=>{
        targetOption.loading = false;
        targetOption.children = childrenArr
        this.options = [...this.options];
        console.log('this.itemData.options====>',this.options,targetOption);
      })
      // load options lazily
      // setTimeout(() => {
      //   targetOption.loading = false;
      //   targetOption.children = [
      //     {
      //       label: `${targetOption.label} Dynamic 1`,
      //       value: 'dynamic1',
      //     },
      //     {
      //       label: `${targetOption.label} Dynamic 2`,
      //       value: 'dynamic2',
      //     },
      //   ];
      //   this.options = [...this.options];
      //   console.log('this.itemData.options====>',this.options,targetOption);
      // }, 1000);
    },
    cascaderChange(value){
      const oldValue = this.itemData.value
      // console.log('cascaderChange====>',value,oldValue);
      this.event && this.event('change',value,this.itemData)
    },
    onBlurEvent(){
      this.event && this.event('blur',this.itemData.value,this.itemData)
    },
    getLabel(value){
      return value ?`${value}：`:''
    },
    filter(inputValue, path) {
      // console.log('filter====>', inputValue, path)
      return path.some(option => option.label.indexOf(inputValue) > -1)
    },
    getvalue(value,itemType,disabled,options,defaultValue){
    // console.log(itemType,defaultValue,this.itemData);
    // showSearch={this.filter} field-names={{ label: 'nodeName', value: 'id', children: 'children' }}
      const itemTypeAction = {
        'input':()=>{ return <a-input v-model={value} disabled={disabled} placeholder="" />},
        'textarea':()=>{ return <a-textarea v-model={value} disabled={disabled}  placeholder="" auto-size={{ minRows: 3, maxRows: 5 }} />},
        'JYFWNewItem':()=>{ return  <JYFWNewItem dataArr={value}></JYFWNewItem>},
        'cascader':()=>{ return  <a-cascader defaultValue={value} showSearch={{filter:this.filter}} options={this.options} load-data={this.loadDataEvent} placeholder="请选择经营范围" change-on-select  onChange={this.cascaderChange} onBlur={this.onBlurEvent} />},
        'alert':()=>{
          if(this.isType.isNullOrUnDef(value) || this.isType.isEmpty(value)){
            return ''
          }
          return  <a-alert message={value} type="info" show-icon class="ant-alert-error ant-alert-error-h"/>
        },
        'select':()=>{ return  (<a-select v-model={ this.itemData.value } onChange={this.cascaderChange} onBlur={this.onBlurEvent} placeholder="请选择组织形式">
        {options && options.map((item) => {
           return (<a-select-option  value={item.value}>
            {item.label}
          </a-select-option>)})}
        </a-select>)},

      }
      return itemTypeAction[itemType] && itemTypeAction[itemType]()
    },
    getCellVal(required,type,value,itemType,disabled,options,defaultValue){
      const typeList = {
        label:{className:`cell-label ${required==true?'cell-label-req':''}`,getVal:this.getLabel},
        value:{className:'cell-value',getVal:this.getvalue},
      }
      const { className,getVal } = typeList[type]
      return (<div class={['item-cell',className]}>
        {getVal(value,itemType,disabled,options,defaultValue)}
      </div>)
    },
    getItem(item){
      return (<div class={['pro-item-cell',this.isError&&'has-error',`${item.nameEN}-item`]}>
        {this.getCellVal(item.required,'label',item.label)}
        {this.getCellVal(item.required,'value',item.value,item.type,item.disabled,item.options,item.defaultValue)}
      </div>)
    },
    getItemError(){
      return (<div class={'pro-item-error animate__animated animate__shakeX'}>
        <div class={'temp-cell'}> </div>
        <div class={'error-mesg'}>{this.errorMsg} </div>
      </div>)
    },
  },
  render: function(h) {
    return (<div class={['pro-item-row',`${this.itemData.nameEN}`]}>
      {this.getItem(this.itemData)}
      {this.isError && this.getItemError()}
    </div>)
  }
}


// const tempOption = [
//           {
//             value: '801',
//             label: '浙江',
//             children:[{value: '802',  label: '浙江2',disabled:true},{value: '803',  label: '浙江3',}],
//             isLeaf: true,
//           },
//           {
//             value: 'jiangsu',
//             label: '江苏',
//             isLeaf: false,
//           },
//         ]
// const tempOption1 = [{label:'组织形式1',value:'1'},{label:'组织形式2',value:'2'},{label:'组织形式3',value:'3'}]
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'JYFWPro',
  components: {ProItem},
  props: {
    // 主数据源 一级数据源
    masterDataSource:{
      type: Array,
      required: true,
      default: [],
    },
    // 非主数据源  一级数据源
    optionList: {
      type: Array,
      required: true,
      default: []
    },
    // 默认值显示
    // [{ids:[],organizationForm:1}]
    defaultValue: { type: Array },
    // 经营范围  组织形式
    // [{ids:[],organizationForm, parentId, invoiceId, invoiceName, labelEntname, labelOrgname, nodeActivty, nodeName, nodeNature}]
    value: { type: Array },
    height: { type: Number, default: 420 },
    // 获取数据事件
    getDataEvent:{ type:Function }
  },
  data() {
    // 这里存放数据
    return {
      spinning:false,
      keySize:0,
      // 用于存储选中的选项 { '0':{ l1:1001405, l2:1001490 }, '1':{ l1:1001405, l2:1001490 } }
      tempSelectVal:{},
      optionList_:[],
      masterDataSource_:[],
      // 详情
      ManageNatureDetail:{},
      organizationFormOption:{0:"工作室",1:"部",2:'中心'},
      formDataArr:[
        // {key:'0',dataList:[
        //   {nameEN:'jyfw',label:'主营经营范围',value:[],type:'cascader',options:tempOption,disabled:false,isError:false,errorMsg:'请选择经营范围'},
        //   {nameEN:'zzxs',label:'组织形式',value:'',type:'select',options:tempOption1,disabled:false,isError:false,errorMsg:''},
        //   {nameEN:'nodeActivty',label:'相关活动',value:'内容',type:'textarea',disabled:true},
        //   {nameEN:'invoiceName',label:'应税项目',value:[],type:'JYFWNewItem',disabled:true},
        // ]},
        // {key:'1',dataList:[
        //   {nameEN:'jyfw',label:'经营范围',value:[],type:'cascader',options:tempOption,disabled:false,isError:false,errorMsg:''},
        //   // {nameEN:'zzxs',label:'组织形式',value:'',type:'select',options:tempOption1,disabled:false,isError:false,errorMsg:''},
        //   {nameEN:'nodeActivty',label:'相关活动',value:'内容',type:'textarea',disabled:true},
        //   {nameEN:'invoiceName',label:'应税项目',value:[],type:'JYFWNewItem',disabled:true},
        // ]},
      ]

    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    // tempSelectVal: {
    //   handler(val) {
    //     const tempArr_= []
    //     for (const key in val) {
    //       const {l1,l2} = val[key]
    //       tempArr_.push(l1)
    //     }
    //     this.optionList_.forEach(item=>{
    //       if(tempArr_.indexOf(item.value)>=0){
    //         item.disabled = true
    //       }else{
    //         item.disabled = false
    //       }
    //     })
    //     console.log('tempSelectVal *******************************',this.optionList_, tempArr_,val);
    //   },
    //   deep: true,
    //   immediate: true
    // },

    defaultValue: {
      handler(val) {
        // console.log('defaultValue=======>', val)
        this.$nextTick(() => {
          this.setDefaultValue(val)
          this.updateDefaultValue(this.defaultValue,this.masterDataSource)
        })
      },
      deep: true,
      immediate: true
    },
    optionList: {
      handler(val) {
       if(!this.isType.isEmpty(val)){
        this.optionList_ = val
        // this.updateDefaultValue(this.defaultValue,this.masterDataSource)
       }
      },
      deep: true,
      immediate: true
    },
    masterDataSource: {
      handler(val) {
       if(!this.isType.isEmpty(val)){
        this.masterDataSource_ = val
        this.updateDefaultValue(this.defaultValue,this.masterDataSource)
       }
      },
      deep: true,
      immediate: true
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  // 方法集合
  methods: {
    init(){
      if((this.isType.isNullOrUnDef(this.defaultValue) || this.isType.isEmpty(this.defaultValue)) && this.isType.isEmpty(this.formDataArr)){
        // console.log('######################################## 1 #################################################################');
        this.add()
      }
    },
    upDateOptionList(){
      const tempArr_= []
      for (const key in this.tempSelectVal) {
        const {l1,l2} = this.tempSelectVal[key]
        tempArr_.push(l2)
      }
      const tenpOption_ = [...this.optionList_]
      tenpOption_.forEach(item=>{
        const {children} = item
        children && children.forEach(Citem=>{
          if(tempArr_.indexOf(Citem.value)>=0){
            Citem.disabled = true
          }else{
            Citem.disabled = false
          }
        })
      })

      this.formDataArr.forEach((item,index)=>{
        if(index>0){
          item.dataList[0].options = tenpOption_
        }
      })
      this.optionList_ = tenpOption_
      console.log('upDateOptionList=======>', this.optionList_, tenpOption_,this.formDataArr);
    },
    setDefaultValue(valArr){
      if(!this.isType.isNullOrUnDef(valArr) && !this.isType.isEmpty(valArr)){
        // console.log('######################################## 2 #################################################################');
        const formCount = this.formDataArr.length
        if(formCount==0){
          this.spinning = true
          valArr.forEach(async (item,index)=>{
            this.add(item)
          })
          this.spinning = false
        }else{
          // 更新已有数据
          valArr.forEach((item,index)=>{
            if(index<formCount){
              this.formDataArr[index].dataList[0].value = item.ids.map(item=>Number(item))
              if(index==0){
                this.formDataArr[index].dataList[1].value = item.organizationForm // 组织形式
              }
              this.formDataArr[index].key=index+''
              this.tempSelectVal[this.formDataArr[index].key] = { 'l1':this.formDataArr[index].dataList[0].value [0], 'l2':this.formDataArr[index].dataList[0].value [1] || ''}
            }else{
              this.add(item)
            }
          })
        }
        this.updateDefaultValue(valArr,this.masterDataSource)
        this.getModeVal('1')
        this.$nextTick().then(()=>{
          this.upDateOptionList()
        })
      }
    },
    updateDefaultValue(valArr,MDSData){
      // console.log('setDefaultValue=======>', valArr,MDSData);
      if(!this.isType.isNullOrUnDef(valArr) && !this.isType.isEmpty(valArr) && !this.isType.isNullOrUnDef(MDSData) && !this.isType.isEmpty(MDSData)){
        valArr.forEach(async (item,index)=>{
          this.getDefault2Info(item.ids,index)
        })
      }
      if(!this.isType.isNullOrUnDef(MDSData) && !this.isType.isEmpty(MDSData)){
        this.init()
      }
    },
    getParentData(ids, meritoFlag){
      let temp = []
      if(meritoFlag === 1){
        temp = this.masterDataSource_
      } else {
        temp = this.optionList
      }
      const res = {}
      temp.forEach(item=>{
        const {id, nodeName, children} = item
        if(ids[0] == id) {
          res['nodeName'] = nodeName
          children.forEach(nodeItem => {
            const {id, nodeNature} = nodeItem
            if(id == ids[1]){
              res['nodeNature'] = nodeNature
            }
          })
        }
      })
      return res

    },
    async getDefault2Info(ids,index){
      //获取二级数据  meritoFlag = 1 主数据   meritoFlag = 0
      let meritoFlag = 0
      if(index==0){
        meritoFlag = 1
      }
      // const res = await this.getDataEvent(meritoFlag,2,ids[0])
      // // console.log('获取二级数据=====>',res,ids,index);
      // const tempOption = [...this.formDataArr[index].dataList[0].options]
      // tempOption.forEach(item=>{
      //   if(item.value == ids[0]){
      //     item.isLeaf = true
      //     item['children'] = res
      //   }
      // })
      const resdetail = await this.getDataEvent(meritoFlag,3,ids[1])
      const ll =  this.getParentData(ids,meritoFlag)
      // console.log('************************', ll);
      // console.log('获取详情=====>',resdetail);  取上一级的nodeName
      if(!this.isType.isNullOrUnDef(resdetail) && !this.isType.isEmpty(resdetail)){
        this.ManageNatureDetail[resdetail.id] = {detail:{...resdetail,...ll},val:ids}
        // 更新组织形式
        this.setzzxsOption(index,0,ids,resdetail)

        if(index==0){
          this.formDataArr[index].dataList[2].value = resdetail.nodeDescription // 备注
          this.formDataArr[index].dataList[3].value = resdetail.nodeActivty // 相关活动
          this.formDataArr[index].dataList[4].value = resdetail.invoiceName  // 应税项目
        }else{
          this.formDataArr[index].dataList[1].value = resdetail.nodeDescription // 备注
          this.formDataArr[index].dataList[2].value = resdetail.nodeActivty //相关活动
          this.formDataArr[index].dataList[3].value = resdetail.invoiceName  // 应税项目
        }
        this.getModeVal()
      }else{
        // 当前值不存在或者被禁用,请重新选择！
        this.formDataArr[index].dataList[0].isError = true
        this.formDataArr[index].dataList[0].errorMsg = '当前值不存在或者被禁用,请重新选择！'
      }
      // this.formDataArr[index].dataList[0].options = tempOption
    },
    getVerificationRes(){
      return this.check(null,null,true)
    },

    check(index_,pindex_,isCheck2){
      let res = true
      /**
       * 检查主经营范围是否有值
       * @param {*} tempMsg
       */
      const checkMaster = (tempMsg)=>{
        //
        let res_ = tempMsg
        if(this.isType.isNullOrUnDef(this.formDataArr[0].dataList[0].value) || this.isType.isArray(this.formDataArr[0].dataList[0].value) &&this.formDataArr[0].dataList[0].value.length ==0){
          res_ = '请先选择主经营范围'
        }
        return res_
      }
      /**
       *  设置指定的错误信息提示
       * @param {*} i
       * @param {*} pi
       */
      const setErrInfo=(i,pi)=>{
        let res_ = true
        const tempVal = this.formDataArr[i].dataList[pi].value
        const tempName = this.formDataArr[i].dataList[pi].nameEN
        if(this.isType.isNullOrUnDef(tempVal) ||this.isType.isEmpty(tempVal) || (this.isType.isArray(tempVal) &&tempVal.length==0) ){
          this.formDataArr[i].dataList[pi].isError = true
          let tempMsg = `请选择${this.formDataArr[i].dataList[pi].label}`
          if(i==0&&pi==1){
            tempMsg = checkMaster(tempMsg)
          }
          this.formDataArr[i].dataList[pi].errorMsg =tempMsg
          res_ = false
        }else{
          this.formDataArr[i].dataList[pi].isError = false
          this.formDataArr[i].dataList[pi].errorMsg =''
        }
        if(isCheck2 == true){
          if(tempName == 'jyfw'){
            if(tempVal.length != 2){
              this.formDataArr[i].dataList[pi].isError = true
              this.formDataArr[i].dataList[pi].errorMsg = '请选择二级经营范围'
              res_ = false
            }else{
              this.formDataArr[i].dataList[pi].isError = false
              this.formDataArr[i].dataList[pi].errorMsg =''
            }
          }
        }
        return res_
      }

      if(this.isType.isNumber(index_)){
        res = setErrInfo(index_,pindex_)
      }else{
        this.formDataArr.forEach((item,index)=>{
          const {dataList} = item
          dataList.forEach((pitem,pindex)=>{
            if(pitem.nameEN=='jyfw'||pitem.nameEN=='zzxs'){
              res = setErrInfo(index,pindex)
            }
          })
        })
      }
      return res
    },
    getModeVal(type){
      if(type!='1'){
        if(!this.check()){
          return false
        }
      }
      const tempArr = []
      this.formDataArr.forEach(item=>{
        const {dataList}= item
        let tempObj = {}
        dataList.forEach(pitem=>{
          tempObj[pitem.nameEN] = pitem.value
          // nameEN:"jyfw"
          if(pitem.nameEN=='jyfw'){
            const ll = pitem.value[1]
            if(!this.isType.isNullOrUnDef(ll) && !this.isType.isEmpty(ll) && !this.isType.isNullOrUnDef(this.ManageNatureDetail[ll]) && !this.isType.isEmpty(this.ManageNatureDetail[ll])){
              const tempdetail = this.ManageNatureDetail[ll].detail
              tempObj = {...tempObj,...tempdetail}
            }
          }
        })
        tempObj = {...tempObj, organizationForm:tempObj.zzxs}
        tempArr.push(tempObj)
      })
      this.$emit('change.value', tempArr)
      this.$emit('change', tempArr)
      this.$emit('input', tempArr)
      return true
    },
    /**
     * 设置组织形式数据
     * @param {*} index_
     * @param {*} pindex_
     * @param {*} val_
     */
    setzzxsOption(index_,pindex_,val_,item){
      if(index_ >0){
        return false
      }
      if(this.isType.isNullOrUnDef(item) || this.isType.isEmpty(item)){
        return false
      }
      const tempArr = []
      item.organizationalList.forEach(key=>{
        tempArr.push({label:this.organizationFormOption[key],value:key},)
      })
      this.formDataArr[index_].dataList[1].options = tempArr
    },
    ProItemEvent(index,pindex,type,val,item){
      // console.log('================ProItemEvent==========>',type,index,pindex,val,item);
      const actionList = {
        'change':async (index_,pindex_,val_,item_)=>{
          const {nameEN} = item_ // nameEN "jyfw"
          this.formDataArr[index_].dataList[pindex_].value = val_
          if(nameEN=='jyfw'){
            this.tempSelectVal[this.formDataArr[index_].key] = { 'l1':val_[0], 'l2':val_[1] || ''}
            // console.log('change  ###########',nameEN,index_,pindex_,val_,item_,this.tempSelectVal);
            // 获取详情数据
            if(val_.length==2){
              // 获取详情
              let meritoFlag = 0
              if(item_.label=='主营经营范围'){
                meritoFlag = 1
              }
              const resdetail = await this.getDataEvent(meritoFlag,3,val_[1])
              // console.log('获取详情=====>',resdetail);
              const ll =  this.getParentData(val_,meritoFlag)
              this.ManageNatureDetail[resdetail.id] = {detail:{...resdetail,...ll},val:val_}
              // 设置对应的 组织形式数据  备注  相关活动  应税项目
              this.setzzxsOption(index_,pindex_,val_,resdetail)
              if(index_==0){
                this.formDataArr[index_].dataList[2].value = resdetail.nodeDescription // 备注
                this.formDataArr[index_].dataList[3].value = resdetail.nodeActivty// 相关活动
                this.formDataArr[index_].dataList[4].value =  resdetail.invoiceName  // 应税项目 开票类目
              }else{
                this.formDataArr[index_].dataList[1].value = resdetail.nodeDescription // 备注
                this.formDataArr[index_].dataList[2].value =  resdetail.nodeActivty //相关活动
                this.formDataArr[index_].dataList[3].value = resdetail.invoiceName   // 应税项目 开票类目
              }
            }
            this.$nextTick().then(()=>{
              this.upDateOptionList()
            })
          }
        },
        // 当指定了必填组件时，此组件失去焦点时进行数据值检查
        'blur':(index_,pindex_,val_,item_)=>{
          this.check(index_,pindex_)
          this.getModeVal('1')
        },
        // 用于加载指定经营范围的子集集合数据
        'loadData':async (index_,pindex_,targetOption,cb)=>{
          // console.log('loadData=============>',index_,pindex_,targetOption);
          // meritoFlag,level,id
          let templevel = 0
          if(targetOption.level == 1){
            templevel = targetOption.level +1
          }
          const res = await this.getDataEvent(targetOption.meritoFlag,templevel,targetOption.value)
          // console.log('loadData 1=============>',res);
          cb && cb(res)
          this.$nextTick().then(()=>{
            this.upDateOptionList()
          })
          // setTimeout(() => {
          //   cb && cb(tempArr)
          // },1000)
        }
      }

      actionList[type] && actionList[type](index,pindex,val,item)

    },
    add(defItem,itemDetail={nodeDescription:'',nodeActivty:'',invoiceName:[]}){
      const dataSize = this.formDataArr.length
      const tempItem = [
          {required:true, nameEN:'jyfw',label:'主营经营范围',value:[],type:'cascader',options:[],disabled:false,isError:false,errorMsg:''},
          {required:true, nameEN:'zzxs',label:'组织形式',value:'',type:'select',options:[],disabled:false,isError:false,errorMsg:''},
          {required:false, nameEN:'nodeDescription',label:'',value:'',type:'alert',disabled:true},
          {required:false, nameEN:'nodeActivty',label:'相关活动',value:'',type:'textarea',disabled:true},
          {required:false, nameEN:'invoiceName',label:'应税项目',value:[],type:'JYFWNewItem',disabled:true},
      ]
      const temp = {key:'',dataList:[]}
      const tempArr = []
      if(dataSize>=1){
        tempItem[0].options = [...this.optionList_]
        tempItem.forEach(item=>{
          // && item.nameEN !='nodeDescription'
          if(item.nameEN!='zzxs' ){
            tempArr.push(item)
          }
        })
        tempArr[0].label = `经营范围${dataSize+1}`
      }else{
        tempItem[0].options = this.masterDataSource_
        tempArr.push(...tempItem)
      }
      temp.dataList = tempArr
      temp.key = this.keySize +1

      if(defItem){
         // 需要根据接口返回的数据进行更新 下拉option的数据 包括 经营范围和组织形式
        const {nodeDescription,nodeActivty,invoiceName} = itemDetail
        //需要设置默认值 查询接口后进行相应元素赋值
        temp.dataList[0].value = defItem.ids.map(item=>Number(item)) // 经营范围
        if(temp.dataList[1].nameEN == 'zzxs'){
          temp.dataList[1].value = defItem.organizationForm // 组织形式
          temp.dataList[2].value = nodeDescription // 备注
          temp.dataList[3].value = nodeActivty // 相关活动
          temp.dataList[4].value = invoiceName  // 应税项目
        }else{
          temp.dataList[1].value = nodeDescription // 备注
          temp.dataList[2].value = nodeActivty //相关活动
          temp.dataList[3].value = invoiceName  // 应税项目
        }
      }

      this.formDataArr.push(temp)
      this.getModeVal('1')
      this.keySize = temp.key
      if(defItem){
        this.tempSelectVal[temp.key] = { 'l1':temp.dataList[0].value[0], 'l2':temp.dataList[0].value[1] || ''}
      }
    },
    deleteEvent(delItem,delIndex){
      const self = this
      const currentFormSize = this.formDataArr.length
      console.log('deleteEvent=====>',delItem,delIndex);
      const setTempVal = (self_,delItem_,delIndex_)=>{
        const tempAttr = []
        self_.formDataArr.forEach(item=>{
          if(item.key!=delItem_.key){
            tempAttr.push(item)
          }
        })
        for (let index = 0; index < tempAttr.length; index++) {
          const item = tempAttr[index];
          const iNum = (index+1)
          if(delIndex_==0){
            if(iNum==1){
              const tempItem = item.dataList
              const [a,...args] =  tempItem
              const t =  {required:true, nameEN:'zzxs',label:'组织形式',value:'',type:'select',options:[],disabled:false,isError:false,errorMsg:''}
              tempAttr[index].dataList = [{...a,label:'主营经营范围'},t,...args]
            }else{
              tempAttr[index].dataList[0].label = `经营范围${iNum}`
            }

          }else{
            if(iNum!=1){
              tempAttr[index].dataList[0].label = `经营范围${iNum}`
            }
          }
        }
        self_.formDataArr = tempAttr
        delete self_.tempSelectVal[delItem_.key]
      }

      this.$confirm({
        content: '确定要删除吗？',
        onOk() {
          return new Promise((resolve, reject) => {
            if (currentFormSize == 1) {
              self.$message.warning('已经是最后一条了，不能再删了！')
            }
            if (currentFormSize > 1) {
              setTempVal(self,delItem,delIndex)
              self.getModeVal('1')
              self.upDateOptionList()
            }
            return resolve()
          })
        },
        cancelText: '取消',
        onCancel() {}
      })
    }
  },
  }
</script>
<style lang='less'>
.JYFW-pro-con{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  flex-direction: column;
  position: relative;
  .pro-item{
    position: relative;
    width: 100%;
    // height: 100px;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    flex-direction: column;
    padding: 10px 30px 10px 10px;
    // border: 1px solid #c3c3c3;
    .pro-item-delete{
      // position:
      position: absolute;
      top: 5px;
      right: 1px;
    }

    .pro-item-row{
      width: 100%;
      // height: 50px;
      // border: 1px solid #c3c3c3;
      display: flex;
      justify-content:flex-start;
      align-items: center;
      // flex-direction: column;
      // margin: 5px 0;
      overflow: hidden;
      margin-bottom: 30px;
      position: relative;
      .pro-item-cell{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content:flex-start;
        align-items: center;
        line-height: 32px;
        .item-cell{
          // width: 100%;
          height: 100%;
          // border: 1px solid #c3c3c3;
          display: flex;
          justify-content:flex-start;
          align-items: center;

          &.cell-label{
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            max-width: 150px;

            &.cell-label-req::before {
              display: inline-block;
              margin-right: 4px;
              color: #f5222d;
              font-size: 14px;
              font-family: SimSun, sans-serif;
              line-height: 1;
              content: '*';
            }

          }
          &.cell-value{
            flex: 5;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            // flex-direction: column;
            overflow: auto
          }
        }
      }
      // 错误信息
      .pro-item-error{
        width: 100%;
        position: absolute;
        left: 0px;
        bottom: -22px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        // line-height: 24px;
        .temp-cell{
          flex: 1;
          height: 100%;
          max-width: 150px;
        }
        .error-mesg{
          height: 100%;
          flex: 5;
          color: #f5222d;
          clear: both;
          min-height: 22px;
          // margin-top: -2px;
          font-size: 14px;
          line-height: 1.5;
          transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
        }

      }
    }
  }

  .ant-alert-error-h{
    min-height: 39px;
  }
}
</style>
